<style scoped>
li{
     padding-bottom: 5px;
     
 }

.link{
    cursor:pointer
 }
.link:hover{
    /* font-weight: bold;
    font-size: large; */
    text-decoration: underline;
}

.clickable_icon{
    cursor:pointer
}
.float_right{
    float:right;
}

.inline{
    display: inline;
}

.clickable_icon:hover{
    font-weight: bold;
    font-size: large;
}

</style>

<template>
  <Card>
    <div slot="title">
        <Icon type="flag"></Icon>
        排名
        
        <div @click="refresh"  class="inline float_right">
            <Icon type="ios-reload" class="clickable_icon"></Icon>
        </div>
        <div @click="sortByAmount=!sortByAmount"  class="inline float_right">
            <span class="link">{{sortKeyShowText}}</span>
        </div>
    </div>
    <!-- <p>敬请期待</p> -->
    <ul>
        <li v-for="(user,n) in logRanks" :key="n" >
            <span class="link" @click="filterByUser(user._id)">{{user._id}}</span>
            <span v-show="sortByAmount" class="link" @click="filterByUser(user._id)" style="float:right">
                {{user.amount}}条
            </span>
             <span v-show="!sortByAmount" class="link" @click="filterByUser(user._id)" style="float:right">
                {{user.duration}}小时
            </span>
        </li>
    </ul>
  </Card>
</template>

<script>

import {mapState, mapActions} from 'vuex'
import Vue from 'vue'
import _ from 'lodash'

var keyShowText = {
    amount: '按条数排序',
    duration: '按时长排序'
};

export default {
    data: function(){
        return {
            sortByAmount: true
        };
    },
  computed: Object.assign(mapState({
    users:'users'
  }),{
      logRanks(){
          return _.sortBy(this.users,this.sortKey).reverse();
      },
      sortKey(){
        let sortKey = this.sortByAmount?'amount':'duration';
        return sortKey;
      },
      sortKeyShowText(){
          return keyShowText[this.sortKey];
      }
  }),
  methods: Object.assign(mapActions({
      getUsers:'getUsers',
      filterByUser:'filterByUser'
  }),{
      refresh(){
          this.getUsers().then(()=>{
              Vue.prototype.$Message.success('刷新成功');
          });
      },
  })
}
</script>
